<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="flowModelForm" class="demo-form-inline">
          <el-form-item label="卡组">
            <el-select v-model="flowModelForm.region" placeholder="活动区域">
              <el-option label="ZAPP" value="shanghai"></el-option>
              <el-option label="OF" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="钱包">
            <el-select v-model="flowModelForm.region" placeholder="活动区域">
              <el-option label="HK" value="shanghai"></el-option>
              <el-option label="CN" value="beijing"></el-option>
              <el-option label="GCash" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="环境">
            <el-select v-model="flowModelForm.region" placeholder="活动区域">
              <el-option label="HK联调" value="shanghai"></el-option>
              <el-option label="HK联调" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="confirmFlowModel">确认</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
       
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>接口列表</span>
          </div>
          <div class="text item">
            <draggable :list="requestApiList" :group="{ name: 'requestApi', pull: 'clone', put: false }" @change="log">
          <div class="request-api-list" v-for="element in requestApiList" :key="element.name">
            <el-alert :title="element.name" type="info" description="Auth请求" :closable="false">
            </el-alert>
          </div>
        </draggable>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>测试流程</span>
            <el-button style="float: right; padding: 3px 0" type="text">立即执行</el-button>
          </div>
          <div class="text item">
            <el-timeline>
              <draggable :list="actualRequestApiList" group="requestApi" @change="log">
                <el-timeline-item v-for="(activity, index) in actualRequestApiList" :key="index">
                  Step{{ index + 1 }} : {{ activity.name }}
                </el-timeline-item>
              </draggable>
            </el-timeline>
          </div>
        </el-card>

      </el-col>
      <el-col :span="8">
        <!-- <el-steps direction="vertical" :active="1" id="items">
          <el-step title="步骤 1"></el-step>
          <el-step title="步骤 2"></el-step>
          <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
        </el-steps> -->
      </el-col>
    </el-row>

  </div>

</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: "Index",
  components: {
    draggable
  },
  data() {
    return {
      flowModelForm: {
      },
      apiList: [

      ],
      requestApiList: [
        { name: "AccountDebits", id: 1 },
        { name: "DebitsInstraction", id: 2 },
        { name: "AccountCredits", id: 3 },
      ],
      actualRequestApiList: [
        { name: "AccountDebits", id: 1 },
        { name: "DebitsInstraction", id: 2 },
        { name: "AccountDebits22", id: 3 },
      ]
    }
  },
  methods: {
    confirmFlowModel() {
      console.log('Flow Model Form Submitted:', this.flowModelForm);
    },
    log: function (evt) {
      window.console.log(evt);
    }
  },
  mounted() {

  },
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
}

.flow-container {
  width: 100%;
  height: 600px;
  border: 1px solid #dcdfe6;
}

.request-api-list {
  margin-bottom: 10px;
}
</style>
